<template>
	<view>
		<view class="title">
			<view class="bl"></view>兼职信息
		</view>
		<view class="dev-box base-info">
			<view class="info-item">
				<view class="text">岗位名称</view>
				<iInput v-model="job.title" type="text" maxlength="50" placeholder="请填写岗位名称"></iInput>
			</view>
			<view class="info-item">
				<view class="text">商家名称</view>
				<iInput v-model="job.shopName" type="text" placeholder="请填写商家名称"></iInput>
			</view>
			<view class="info-item">
				<view class="text">联系人</view>
				<iInput v-model="job.name" type="text" placeholder="请填写联系人姓名"></iInput>
			</view>
			<view class="info-item">
				<view class="text">联系电话</view>
				<iInput v-model="job.toPhone" type="number" maxlength="11"  placeholder="请填写商家联系方式"></iInput>
			</view>
			
			<view class="info-item">
				<view class="text">时薪</view>
				<iInput v-model="job.timeMoney" type="number" maxlength="6" placeholder="请填写时薪水元/小时或/月"></iInput>
			</view>
			
			<view class="info-item">
				<view class="text">工作场景</view>
				<iInput v-model="job.workType" type="text" placeholder="请填写工作场景,如:酒店/饭店"></iInput>
			</view>
			<view class="info-item">
				<view class="text">工作类型</view>
				<view class="select-box">
					<picker @change="selectType" :value="job.wayModels" :range="subTypeArrays">
						<input class="padding-20" disabled="true" placeholder="请选择工作类型" :value="job.wayModels" style="margin-left:20upx"/>
					</picker>
					
				</view>
				<!-- <view class="select-box"  @click="selectType"><text :style="subType==''?'color:gray':''">{{subType==''?"请选择":subType}}</text></view> -->
			</view>
			<view class="info-item">
				<view class="text">工资结算</view>
				<view class="select-box">
					<picker @change="selectTypes" :value="job.wayModel" :range="subTypeArray">
						<input class="padding-20" disabled="true" placeholder="请选择工资结算类型" :value="job.wayModel" style="margin-left:20upx"/>
					</picker>
					
				</view>
				<!-- <view class="select-box"  @click="selectType"><text :style="subType==''?'color:gray':''">{{subType==''?"请选择":subType}}</text></view> -->
			</view>
			<view class="info-item">
				<view class="text">人员要求</view>
				<iInput v-model="job.num" type="number" maxlength="4" placeholder="请填写人员要求/人"></iInput>
			</view>
			
			<view class="info-item" style="flex-direction: column;">
				<view class="text" style="text-align-last: left;text-align: left;">工作描述</view>
				
				<textarea v-model="job.describes" type="text" maxlength="500" placeholder="请填写工作描述"></textarea>
				
			</view>
			
			<view class="info-item" style="flex-direction: column;">
				<view class="text" style="text-align-last: left;text-align: left;">岗位说明</view>
				<textarea v-model="job.jobDescription" type="text" maxlength="200" placeholder="请填写岗位说明综合描述"></textarea>
			</view>
			
				<view class="info-item">
					<view class="text">岗位标签</view>
					<iInput v-model="job.labelList" type="text" maxlength="40" placeholder="请填写岗位标签,用英文,符号分隔"></iInput>
				</view>
			<view class="info-item">
				<view class="text">开始时间</view>
				<view class="select-box">
					 <input @click="startTimeShow = true" class="padding-20" disabled="true" placeholder="请选择兼职开始时间" :value="job.startTime" style="margin-left:20upx"/>
				</view>
				 <!-- <iInput v-model="job.startTime" type="text" placeholder="请选择兼职开始时间"  ></iInput> -->
				
			</view>
			<view class="info-item">
				<view class="text">结束时间</view>
				<!-- <iInput v-model="job.endTime" type="text" placeholder="请填写兼职结束时间"></iInput> -->
				<view class="select-box">
					 <input @click="endTimeShow = true" class="padding-20" disabled="true" placeholder="请选择兼职结束时间" :value="job.endTime" style="margin-left:20upx"/>
				</view>
			</view>
			<view class="info-item">
				<view class="text">截止时间</view>
				<!-- <iInput v-model="job.endUserTime" type="text" placeholder="请填写报名截止时间"></iInput> -->
				<view class="select-box">
					 <input @click="endUserTimeShow = true" class="padding-20" disabled="true" placeholder="请选择报名截止时间" :value="job.endUserTime" style="margin-left:20upx"/>
				</view>
			</view>
			<view class="info-item">
				<view class="text">所在市区</view>
				<view class="select-box"  @click="selectCity"><text :style="city==''?'color:gray':''">{{city==''?"请选择":city}}</text></view>
			</view>
			<view class="info-item">
				<view class="text">工作地点</view>
				<view class="select-box"  @tap="getLocation"><text :style="job.address==''?'color:gray':''">{{job.address==''?"请选择输入详细地址":job.address}}</text></view>
			</view>
			<!-- <view class="info-item">
				<view class="text"></view>
				<view class="select-box"  ><text :style="job.address==''?'color:gray':''">{{job.address==''?"工作详细地址":job.address}}</text></view>
			</view> -->
			<view class="bus-img info-item" style="border:none;padding:0;margin-top:30rpx;">
				<view class="text" style="line-height: normal;">商家照片</view>
				<view class="space"></view>
			</view>
			<m-upimg count="3" url="https://www.cscmkj.cn/starCityAll/user/saveImg" :notli="true" @onUpImg="onUpImg()"></m-upimg>
<!-- 			<m-upimg count="3" url="http://192.168.0.105:2001/starCityAll/user/saveImg" :notli="true" @onUpImg="onUpImg()"></m-upimg> -->
			
		</view>
		<button class="submitBtn" @click="submit" :disabled="btnShow">立即提交</button>
		<mCity ref="mCity" @onConfirm="onConfirm" ></mCity>
		 <u-datetime-picker
		 			   :show="startTimeShow"
		 			   v-model="startTime"
		 			   mode="datetime"
		 						@confirm="startTimeShowConfirm"
		 	   ></u-datetime-picker>
			   <u-datetime-picker
			   			   :show="endTimeShow"
			   			   v-model="endTime"
			   			   mode="datetime"
			   						@confirm="endTimeShowConfirm"
			   	   ></u-datetime-picker>
				   <u-datetime-picker
				   			   :show="endUserTimeShow"
				   			   v-model="endUserTime"
				   			   mode="datetime"
				   						@confirm="endUserTimeShowConfirm"
				   	   ></u-datetime-picker>
	</view>
</template>

<script>
	import iInput from '@/components/watch-login/info-input.vue'; //input
	import mUpimg from '@/components/m-upimg/m-upimg.1.vue'; //input
	import mCity from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		components: {
			iInput,
			mUpimg,
			mCity
		},
		data() {
			return {
				city:"湖南省-长沙市-芙蓉区",
				startTimeShow:false,
				endTimeShow:false,
				endUserTimeShow:false,
				startTime:Number(new Date()),
				endTime:Number(new Date()),
				endUserTime:Number(new Date()),
				job:{
					workType:"",
					shopName:"",
					name:"",
					toPhone:"",
					num:"",
					jobDescription:"",
					wayModel:"",
					wayModels:"",
					address:"",
					jobName:"",
					describes:"",
					timeMoney:"",
					startTime:"",
					endTime:"",
					endUserTime:"",
					filePath:"",
					latitude:"",
					longitude:"",
					province:"",
					city:"",
					distinguish:""
				},
				btnShow:false,
				subTypeArrays:["兼职","全职"],
				subTypeArray:["日结","周结","月结"]
			}
		},
		onLoad() {
			
		},
		onReady(){
		},
		methods: {
			
			startTimeShowConfirm(e) {
				console.log(e.value)
			    //时间戳转换为时间
				const timeFormat = uni.$u.timeFormat;
				
				let timeValue = timeFormat(e.value, 'yyyy-mm-dd hh:MM');
				
				this.job.startTime = timeValue+":00";//value2为页面上的日期
				console.log(this.job.startTime)
				this.startTimeShow = false
			},
			endTimeShowConfirm(e) {
				const timeFormat = uni.$u.timeFormat;
				
				let timeValue = timeFormat(e.value, 'yyyy-mm-dd hh:MM');
				
				this.job.endTime = timeValue+":00";//value2为页面上的日期
				this.endTimeShow = false
			},
			endUserTimeShowConfirm(e) {
			    //时间戳转换为时间
				const timeFormat = uni.$u.timeFormat;
				
				let timeValue = timeFormat(e.value, 'yyyy-mm-dd hh:MM');
				
				this.job.endUserTime = timeValue+":00";//value2为页面上的日期
				this.endUserTimeShow = false
			},
			onUpImg(pList){
				console.log(pList)
				this.job.filePath=""
				for(var l in pList){
					this.job.filePath+=pList[l].path_server+",";
				}
				this.job.filePath=this.job.filePath.substring(0,this.job.filePath.length-1)
			},
			//获取验证码
			async getVerCode() {
				var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码',
						position: 'bottom'
					});
					return false;
				}
				//触发倒计时（一般用于请求成功验证码后调用）
				this.$refs.runCode.$emit('runCode');
				let params = {
					phone: this.phone
				};
				let data = await this.$apis.getVerifyCode(params);
				console.log('getVerCode===', data);
				if (data) {
					uni.showToast({
						title: '获取成功',
						icon: 'none',
						position: 'bottom'
					});
				}
				//终止倒计时（用于突然需要终止倒计时的场景）
				this.$refs.runCode.$emit('runCode',0);
			},
			selectCity(){
				this.$refs.mCity.showPickerView();
			},
			selectType(e){
				this.job.wayModels = this.subTypeArrays[e.target.value];
			},
			selectTypes(e){
				this.job.wayModel = this.subTypeArray[e.target.value];
			},
			onConfirm(obj){
				this.city=obj.label
				this.job.province=obj.label.split("-")[0]
				this.job.city=obj.label.split("-")[1]
				this.job.distinguish=obj.label.split("-")[2]
			},
			getLocation(){
				uni.chooseLocation({
					  success: (res) => {
					    console.log('wx.chooseLocation res=', res);
					    uni.setStorageSync('currentLocation', res);
						this.job.address = res.address;
						this.job.longitude=res.longitude;
						this.job.latitude=res.latitude;
						// this.job.addressName = res.name
					  },
					  fail: function (err) {
					    console.log('取消按钮', err)
					  }
					})
			},
			async submit(){
				let txt=""
				if(this.job.title==""||this.job.title==null){
					txt="岗位名称不能为空！"
				}else if(this.job.shopName==""||this.job.shopName==null){
					txt="商家名称不能为空！"
				}else if(this.job.address==""||this.job.address==null){
					txt="详细地址不能为空！"
				}else if(this.job.wayModel==""||this.job.wayModel==null){
					txt="结算类型不能为空！"
				}else if(this.job.timeMoney==""||this.job.timeMoney==null){
					txt="薪资不能为空！"
				}
				if(txt!=null&&txt!=""){
					
						uni.showToast({
							title: txt,
							icon: 'none',
							position: 'bottom'
						});
					return;
				}
				   var reg = new RegExp("^[0-9]*$");
					let numerr="";
					if(!reg.test(this.job.num)){
						numerr="请输入正确的人员要求";
						
					}
					if(!reg.test(this.job.timeMoney)){
						numerr="请输入正确的时薪范围";
						
					}
					
					if(numerr!=null&&numerr!=""){
						uni.showToast({
							icon: 'none',
							title: numerr,
							position: 'bottom'
						});
						return false;
					}
					
					
				let res=await this.$apis.findJob(this.job);
				console.log(res)
				if(res==true){
					this.btnShow = true
						wx.showToast({
							title: "提交成功！",
							icon: "success",
							duration: 2000
						})
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				}
				
			}
		}
	}
</script>

<style lang="scss">
.title {
	margin: 20upx 4% 20upx 4%;
	font-weight: bold;
	font-size: $font-size-34;
	line-height: 50upx;
	.bl{
		border-radius: 6upx;
		float:left;
		margin-right:20upx;
		background-color: #36B957;
		margin-top:5upx;
		height:40upx;
		width:10upx;
	}
		
}
.base-info{
	padding:0;
	.info-item{
		display: flex;
		border-bottom: 1px solid #F2F2F2;
		margin:0upx 25upx;
		padding: 10rpx 0;
		.text{
			text-align-last:justify;
			font-size: 28upx;
			flex:1;
			text-align: center;
			line-height: 76upx;
			font-weight: bold;
		}
		.select-box{
			flex: 4;
			background-image: url("@/static/img/icons-black.png");
			background-repeat: no-repeat;
			background-position: 95% 50%;
			background-size: 20upx 30upx;
			text{
				margin-left:40upx;
				font-size: 28upx;
				line-height: 76upx;
			}
		}
		i-input{
			flex: 4;
		}
		.space{
			flex: 4;
		}
	}
}
.submitBtn{
	
	margin: 40upx 4% 20upx 4%;
	width:92%;
	height:80upx;
	line-height: 80upx;
	color:white;
	border-radius: 35upx;
	background-color: #5FDB7E;
}
</style>
